<template>
	<view>
		<view class="topimg">
			<view class="topimg_left">
				头像
			</view>
			<view class="topimg_center">
				<image src="../../../static/images/list3.png" style="width: 63%;height: 86%;margin-top: 6%;border-radius: 50%;"></image>
			</view>
			<view class="topimg_right">
				<uni-icons type="right" size="28" color="#ccc"></uni-icons>
			</view>
		</view>
		<view class="topname">
			<view class="topname_left">
				昵称
			</view>
			<view class="topname_center">
				晶晶
			</view>
			<view class="topname_right">
				<uni-icons type="right" size="28" color="#ccc"></uni-icons>
			</view>
		</view>
		
		<button style="background-color: #18BC37;color: #fff;border: 0px;margin-top: 8%;">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
    .topimg{
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
	}
	.topimg_left{
		width: 15%;
		text-align: center;
		line-height: 60px;
		height: 60px;
	}
	.topimg_center{
		width: 20%;
		text-align: center;
		line-height: 60px;
		height: 60px;
		margin-left: 55%;
	}
	.topimg_right{
		width: 5%;
		text-align: center;
		line-height: 60px;
		height: 60px;
	}
	
	.topname{
		width: 100%;
		height: 50px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
	}
	.topname_left{
		width: 15%;
		text-align: center;
		line-height: 50px;
		height: 50px;
	}
	.topname_center{
		width: 20%;
		text-align: center;
		line-height: 50px;
		height: 50px;
		margin-left: 55%;
	}
	.topname_right{
		width: 5%;
		text-align: center;
		line-height: 50px;
		height: 50px;
	}
</style>

